<template>
	<view class="wrapper">
		<u-navbar title="个人中心" @leftClick="backPage" @rightClick="rightClick" :autoBack="true" placeholder :rightText="rightText">

		</u-navbar>
		<view class="search_wrapper">
			<u-search placeholder="请输入房源名称" v-model.trim="houseValue" :showAction="true" actionText="搜索"
				:animation="true" @change="changeHouseValue" @custom="handleGetStartList"></u-search>
		</view>
		<view class="fliter_view">
			<text @click="fliterViewIsShow = true">租金筛选</text><u-icon name="arrow-down" color="#000" size="15" style="display: inline-block;"  @click="fliterViewIsShow = true"></u-icon>
			<view class="right_edit" v-if="rightText == '取消'">
				<u-icon name="minus-circle-fill" color="rgb(245, 110, 61)" size="25" @click="deleteMethod"></u-icon>
			</view>
		</view>
		<view class="page_wrapper">
			<template v-if="indexList.length != 0">
				<view @scrolltolower="scrolltolower">
					<view v-for="(item, index) in indexList" :key="index">
						<ListItem :info="item" @click.native="gotoDetails(item)" class="item">
							<template slot="topRight" v-if="rightText == '取消'" slot-scope="row">
								<u-checkbox-group placement="row" @change="changeActiveState(item.id)">
									<u-checkbox activeColor="rgb(245, 110, 61)" label="" size="23" shape="circle" :checked="false"></u-checkbox>
								</u-checkbox-group>
							</template>
						</ListItem>
					</view>
				</view>
			</template>
			<template v-else>
				   <u-empty
				           mode="data"
				           icon="http://cdn.uviewui.com/uview/empty/data.png"
				   >
				   </u-empty>
  
			</template>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-popup :show="fliterViewIsShow" @close="fliterViewIsShow = false" >
			<rentFilter @change='changeRent($event)' ref="rentResult" @result="resultValue"></rentFilter>
		</u-popup>
	</view>

</template>

<script>
	import {
		getStartList,
		deleteStars
	} from "@/api/home/index.js";

	import debounce from "@/utils/debounce.js";
	import ListItem from '../components/ListItem.vue';
	import rentFilter from "../components/rentFilter.vue";
	export default {
		components: {
			ListItem,
			rentFilter
		},
		data() {
			return {
				rightText: "批量操作",
				checkedList: [],
				houseValue: '',
				value: 1,
				indexList: [],
				sortFilterOption: {
					start: "",
					end: "",
					sort: ""
					},
				fliterViewIsShow: false,
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},

		onShow() {
			this.handleGetStartList();
		},
		methods: {
			backPage() {
				uni.switchTab({
					url:'/pages/home/index'
				})
			},
			resultValue() {
				for(var key in this.sortFilterOption) {
					this.sortFilterOption[key] = ""
				}
				this.houseValue = "";
				this.handleGetStartList();
				// this.fliterViewIsShow = false;
			},
			changeRent(rentObj) {
				console.log(rentObj);
				if(rentObj.start == "" && rentObj.end == "") return this.$refs.uToast.show({
					type: "error",
					message: "请输入查询范围"
				})
				
				this.sortFilterOption = rentObj
				this.handleGetStartList()
				this.fliterViewIsShow = false;
				// 重置
				// this.$refs.rentResult.rentReset()
			},
			
			changeHouseValue: debounce(function(){
				 this.handleGetStartList()
			}, 1000),
		 
			getListDataAll(list) {
				if (list) return list
				return this.indexList

			},

			async deleteMethod() {
				if (this.checkedList.length == 0) return this.$refs.uToast.show({
					type: 'error',
					message: '请选择房源',
				})
				const res = await deleteStars(this.checkedList);
				if (res.data.code != 200) return this.$refs.uToast.show({
					type: "error",
					message: res.data.msg
				})
				this.$refs.uToast.show({
					type: "success",
					message: "删除成功"
				})
				this.rightText = '批量操作';
				this.sortFilterOption.sort = "",
				this.sortFilterOption.start = "",
				this.sortFilterOption.end = ""
				this.handleGetStartList()
			},
			changeActiveState(id) {
				if (this.checkedList.indexOf(id) != -1) {
					this.checkedList = this.checkedList.filter((item) => item != id)
				} else {
					this.checkedList.push(id)
				}
				console.log(this.checkedList);
			},
			rightClick() {
				if (this.rightText == '批量操作') {
					this.rightText = '取消';
					this.checkedList = []
				} else {
					this.rightText = '批量操作'
				}
			},
			async handleGetStartList() {
				const res = await getStartList({
					"communityName": this.houseValue, //小区名称
					"roomNumber": "", //房间号
					"labalName": "", //标签名
					"sort": this.sortFilterOption.sort, //排序 0升序 1降序
					"lowestRent": this.sortFilterOption.start, //最低租金
					"maxRent": this.sortFilterOption.end //最高租金
				})
				console.log(res);
				if (res.data.code != 200) return this.$refs.uToast.show({
					type: "error",
					message: "获取收藏列表失败"
				})
				this.indexList = res.data.rows
				console.log(res);
			},

			gotoDetails(item) {
				uni.navigateTo({
					url: './details?id=' + item.house_id
				})
			},
			change() {

			},
			scrolltolower() {

			},
			loadmore() {

			},
			concatOwnerClick() {

			}
		},
	}
</script>

<style scoped lang="scss">
	.wrapper {
		.search_wrapper {
			display: flex;
			padding: 10rpx;
			background-color: #fff;
		}

		.fliter_view {
			// display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 30rpx;

			text {
				margin-right: 10rpx;
			}

			.right_edit {
				float: right;
				margin-right: 30rpx;
			}
		}

		.page_wrapper {
			.item {
				padding: 20rpx;
			}
		}
	}
</style>